<template>
  <div>
    <el-input
      :placeholder="fld.placeholder ? fld.placeholder : '点击输入'"
      :value="text"
      :disabled="true"
      size="mini">
      <el-button slot="append" icon="el-icon-more" @click="dialogTableVisible=true" size="mini"></el-button>
    </el-input>
    <input type="hidden" :name='fld.name' :value="value"></input>
    <el-dialog
      :title="fld.title"
      :visible.sync="dialogTableVisible"
      append-to-body
      :show-close="false"
      top="30px"
      @open="handleOpen"
      ref="dialog"
      :width="width"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      >
      <!-- 表格 -->
        <el-row class="madan">
          <el-col :span="6">
            <el-table
                :data="tableData"
                size="mini"
                :stripe="true"
                row-class-name="cell-no-padding"
                style="width: 100%">
                <el-table-column
                  label="卷号"
                  width="50">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,0).number"
                    size="mini" :disabled="true"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="公斤数"
                  width="60">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,0).cntKg"
                    @input="handelInput(0,scope.$index,'cntKg',$event)"
                    :disabled="getCell(scope.$index,0).disabled"
                    size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="米数"
                  width="60">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,0).cntM"
                    @input="handelInput(0,scope.$index,'cntM',$event)"
                    :disabled="getCell(scope.$index,0).disabled"
                    size="mini"></el-input>
                  </template>
                </el-table-column>
              </el-table>
          </el-col>
          <el-col :span="6">
            <el-table
                :data="tableData"
                size="mini"
                :stripe="true"
                row-class-name="cell-no-padding"
                style="width: 100%">
                <el-table-column
                  label="卷号"
                  width="50">
                  <template slot-scope="scope">
                    <el-input
                    :value="data[pageSize*(cPage-1)+scope.$index+rowSize] ? data[pageSize*(cPage-1)+scope.$index+rowSize].number : pageSize*(cPage-1)+scope.$index+rowSize+1"
                    size="mini" :disabled="true"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="公斤数"
                  width="60">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,1).cntKg"
                    @input="handelInput(1,scope.$index,'cntKg',$event)"
                    :disabled="getCell(scope.$index,1).disabled"
                    size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="米数"
                  width="60">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,1).cntM"
                    @input="handelInput(1,scope.$index,'cntM',$event)"
                    :disabled="getCell(scope.$index,1).disabled"
                    size="mini"></el-input>
                  </template>
                </el-table-column>
              </el-table>
          </el-col>
          <el-col :span="6">
            <el-table
                :data="tableData"
                size="mini"
                :stripe="true"
                row-class-name="cell-no-padding"
                style="width: 100%">
                <el-table-column
                  label="卷号"
                  width="50">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,2).number"
                    size="mini" :disabled="true"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="公斤数"
                  width="60">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,2).cntKg"
                    @input="handelInput(2,scope.$index,'cntKg',$event)"
                    :disabled="getCell(scope.$index,2).disabled"
                    size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="米数"
                  width="60">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,2).cntM"
                    @input="handelInput(2,scope.$index,'cntM',$event)"
                    :disabled="getCell(scope.$index,2).disabled"
                    size="mini"></el-input>
                  </template>
                </el-table-column>
              </el-table>
          </el-col>
          <el-col :span="6">
            <el-table
                :data="tableData"
                size="mini"
                :stripe="true"
                row-class-name="cell-no-padding"
                style="width: 100%">
                <el-table-column
                  label="卷号"
                  width="50">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,3).number"
                    size="mini" :disabled="true"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="公斤数"
                  width="60">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,3).cntKg"
                    @input="handelInput(3,scope.$index,'cntKg',$event)"
                    :disabled="getCell(scope.$index,3).disabled"
                    size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="米数"
                  width="60">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,3).cntM"
                    @input="handelInput(3,scope.$index,'cntM',$event)"
                    :disabled="getCell(scope.$index,3).disabled"
                    size="mini"></el-input>
                  </template>
                </el-table-column>
              </el-table>
          </el-col>
          <el-col :span="6">
            <el-table
                :data="tableData"
                size="mini"
                :stripe="true"
                row-class-name="cell-no-padding"
                style="width: 100%">
                <el-table-column
                  label="卷号"
                  width="50">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,4).number"
                    size="mini" :disabled="true"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="公斤数"
                  width="60">
                  <template slot-scope="scope">
                    <el-input
                    :value="getCell(scope.$index,4).cntKg"
                    @input="handelInput(4,scope.$index,'cntKg',$event)"
                    :disabled="getCell(scope.$index,4).disabled"
                    size="mini"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="米数"
                  width="60">
                  <template slot-scope="scope"">
                    <el-input
                    :value="getCell(scope.$index,4).cntM"
                    @input="handelInput(4,scope.$index,'cntM',$event)"
                    :disabled="getCell(scope.$index,4).disabled"
                    size="mini"></el-input>
                  </template>
                </el-table-column>
              </el-table>
          </el-col>
          <el-col :span="24">
            <el-pagination
              :page-size="pageSize"
              :pager-count="11"
              layout="prev, pager, next"
              :current-page.sync="cPage"
              @current-change="handelChangePage"
              :total="total">
            </el-pagination>
          </el-col>
        </el-row>
      <!-- end -->
      <div slot="title" class="dialog-footer">
        <el-row>
          <el-col :span="8">{{fld.title}}</el-col>
          <el-col :span="16" style="text-align: right;">
            <el-button @click="addPage" icon="el-icon-circle-plus-outline" type="primary">加一页</el-button>
            <el-button @click="confirmForm" type="success" icon="el-icon-check">确 定</el-button>
            <el-button @click="cannelForm" icon="el-icon-close">取 消</el-button>
          </el-col>
        </el-row>

      </div>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
  define(['vue'],function(vue){
    return vue.component('comp-popup-madan',{
      props:['fld','value','display-text'],
      computed:{
        text:function(){
          var key = this.fld.displayRowKey || this.fld.displayKey;
          var temp = this.$attrs.row ? this.$attrs.row[key] : '';
          // dump(this.fld,key,this.displayText,temp);
          return this.displayText || temp;
        }
      },
      data:function(){
        return {
          //获取数据的url
          tableData:[],
          data:[],
          // action:this.fld.action,
          //参数:其中可能包括从open方法中传入的参数,搜索参数,分页参数
          // params:{},
          //搜索关键字
          // key:'',
          //弹窗选择列表记录中的字段名,表单提交时该字段的值会提交到后台,并作为外键进行保存
          // rowKey:this.fld.rowKey ||'id',
          //需要回显在text中的弹窗列表字段,比如客户名称
          displayKey:this.fld.displayKey,
          //text中显示的默认值，
          //可能显式声明了display-text属性，
          //也可能需要显示记录中某个字段的值
          //text : this.displayText || this.$attrs.row[this.fld.displayKey],
          //对话框是否显示
          dialogTableVisible:false,
          //分页参数
          cPage:1,
          rowSize:20,
          colSize:4,
          pageSize:100,
          total:100,
          width:"870px",
          start:(parseInt(this.$attrs.row[this.fld.startKey]) || 0),
          //主从表模板中，字表记录会传入row的值
          // row : this.$attrs.row || {},
        };
      },
      template: template,
      methods:{
        //设置displayText的值

        //以下事件没用了,都是在handelselect事件中处理了
        // handleModelInput :function(val){
        //   this.$emit("input", val);
        // },
        //dialog打开前的回调
        getCell: function(row ,col ){
          var key = this.pageSize*(this.cPage-1)+row+this.rowSize*col;
          var obj = this.data[key] || {number:key+1,cntKg:'',cntM:'',disabled:false};

          //如果是开始值不正确的，则直接禁止输入
          if((this.start - 1) > key){
            obj.disabled = true;
          }
          return obj ;
        },
        handleOpen :function(){
          this.data = [];
          //码单页码布局
          while(this.tableData.length < this.rowSize){
            this.tableData.push({});
          }

          //如果有默认的数据，则这里对数据进行处理，获取最大的值，对页码进行初始化
          var numberArr = [0];
          if(this.value && this.value.length > 0){
            for(var k in this.value){
              numberArr.push(parseInt(this.value[k].number));
              this.data[parseInt(this.value[k].number)-1] = this.value[k];
            }
          }

          //获取最大值，最小值
          var max = Math.max(...numberArr);
          var min = Math.min(...numberArr);
          //判断是否有起始值
          if(this.start > min) min = this.start;
          if(this.start > max) max = this.start;

          if(max >= this.pageSize){
            this.total = max + 1;
          }
          //当前页码
          if(min >= this.pageSize){
            this.cPage = parseInt(min/100)+1;
          }
          console.log({max,min,numberArr});

          //回调
          var key = `${this.fld.name}:open`;
          if(this.$root.callbacks[key]) {
            this.$root.callbacks[key].apply(this,[this]);
          }

          // this.$nextTick(()=>{

          // });
        },
        //通过ajax请求从服务器获得数据
        handelInput : function(col ,row ,key ,event) {
          console.log({col,row,key,event});
          var o = this.$attrs.row;
          var _key = (this.cPage - 1) * this.pageSize + (col*this.rowSize) + row ;
          var val = this.data[_key] ? this.data[_key] : {'number':_key+1};
          val[key] = event;
          if(key == 'cntKg'){
            val.cntM = Math.floor(event/o.menfu /o.rate/o.thickness * 100000) / 100000 ;
          }else if(key == 'cntM'){
            val.cntKg = Math.floor(event*o.menfu*o.rate*o.thickness * 100000) / 100000 ;
          }

          vue.set(this.data , _key , val);
          console.log({_key});
          // console.log('data=>',this.data);
          // console.log('value=>',this.value);
        },
        //格式化数据集
        handelChangePage : function(page) {
          this.cPage = page;
        },
        addPage : function(){
          this.total += this.pageSize;
        },
        confirmForm : function(){
          var key = this.fld.displayRowKey || this.fld.displayKey;
          var __k = typeof(key)=='object' ? key.key : key;

          //回显
          var displayText = '';
          var jian = 0; var cntKg = 0;var cntM = 0;
          for(var k in this.data){
            if(k >= 0 && this.data[k].cntKg){
              jian++;
              cntKg += parseFloat(this.data[k].cntKg) || 0;
              cntM += parseFloat(this.data[k].cntM) || 0;
            }
          }
          cntKg = Math.floor(cntKg * 100000) / 100000;
          cntM = Math.floor(cntM * 100000) / 100000;
          displayText = `${jian}卷,${cntKg}公斤,${cntM}米`;
          vue.set(this.$attrs.row , __k , displayText);


          this.$emit('input',this.data);
          this.dialogTableVisible = false

          //回调
          var key = `${this.fld.name}:success`;
          var _data = this.data;
          if(this.$root.callbacks[key]) {
            this.$root.callbacks[key].apply(this,[_data,e]);
          }
        },
        cannelForm : function(){
          // console.log('value=>',this.value);
          // console.log('data=>',this.data);
          this.dialogTableVisible = false
          var key = `${this.fld.name}:close`;
          var _data = this.data;
          if(this.$root.callbacks[key]) {
            this.$root.callbacks[key].apply(this,[_data,e]);
          }
        }
      },
      mounted:function(){

      }
    });
  });
</script>
<style type="text/css">
  .madan .cell-no-padding td{padding: 0px;}
  .madan .cell-no-padding td .cell{padding: 1px;}
  .madan .el-col-6{width: 170px;}
  .madan.el-row{overflow: auto;min-width: 870px;}
  .madan .el-input__inner{height: 23px;line-height: 23px;}
  .el-dialog__body{padding:0 10px 10px 10px  !important}
  .madan .el-input__inner{padding: 0 5px;}
</style>